<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../vue.js"></script>
</head>
<body>
<div id="app1">
  <meatball></meatball>
</div>
<!--data 必须是函数-->
<div id="app2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>
</body>
</html>
<script>
  Vue.component('meatball', {
    template: '<div>Meatball</div>>'
  })
  var app = new Vue({
    el: '#app1'
  })


  var data = {counter: 0};
  Vue.component('simple-counter',{
    template:'<button @click="counter++">{{counter}}</button>',
    data:function () {
      return {
        counter: 0
      }
    }
  })
  var app = new Vue({
    el: '#app2'
  })
</script>